<template>
	<div class="public_main">
		<div class="crumbs">
      <el-breadcrumb separator="/">
				<template v-if="from=='merchant'">
					<el-breadcrumb-item>{{$t('dashBoard.no2')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('dashBoard.no3')}}</el-breadcrumb-item>
					<el-breadcrumb-item v-if="addOrChange=='change'">{{$t('merchantList.no66')}}</el-breadcrumb-item>
					<el-breadcrumb-item v-else>{{$t('merchantList.no7')}}</el-breadcrumb-item>
				</template>
				<template v-else>
					<el-breadcrumb-item>{{$t('sidebar.operator')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('sidebar.processConfig')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('sidebar.processConfig')}}</el-breadcrumb-item>
				</template>
      </el-breadcrumb>
    </div>

		<!-- 添加流程 -->
		<div class="pos">
			<!-- <template v-if="$store.state.common.permiss.merchantlist.includes('edit')"> -->
			<template v-if="$store.state.common.permiss.merchantlist?$store.state.common.permiss.merchantlist.includes('edit'):$store.state.common.permiss.addmerchant.includes('edit')">
				<el-button size="small" v-if="!submenuFlag" type="primary" class="pos-right" @click="addMerchant">{{$t('public.no51')}}</el-button>
				<el-button size="small" v-else type="primary" class="pos-right" @click="onSubmit('addForm')">{{$t('public.no49')}}</el-button>
			</template>
			<h3 class="mb20 blue" v-if="addOrChange=='change'">{{$t('merchantList.no66')}}</h3>
			<h3 class="mb20 blue" v-else>{{$t('merchantList.no7')}}</h3>
			<el-form ref="addForm" :model="addForm" :inline="true" size="small" label-width="120px" :rules="rules">
				<el-form-item :label="$t('merchantList.no8')" prop="id" v-if="addOrChange=='change'">
					<el-input v-model="addForm.partnerNo" disabled style="width:216px" ></el-input>
				</el-form-item>
				<div class="flex">
					<el-form-item :label="$t('merchantList.no1')" prop="partnerName">
						<el-input v-model="addForm.partnerName" style="width:216px" :disabled="!submenuFlag"></el-input>
					</el-form-item>
					<el-form-item :label="$t('merchantList.no4')" prop="stage">
						<el-select size="small" v-model="addForm.stage" :placeholder="$t('public.placeholder')" :disabled="!submenuFlag">
							<el-option v-for="item in options2" :key="item.value" :label="$t(item.label)" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('merchantList.no70')" prop="country">
						<el-select size="small" v-model="addForm.country" :placeholder="$t('merchantList.no73')" :disabled="!submenuFlag||addOrChange=='change'">
							<el-option v-for="item in options3" :key="item.value" :label="$t(item.label)" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</div>
				<div class="flex">
					<el-form-item :label="$t('merchantList.no2')" prop="contactName">
						<el-input v-model="addForm.contactName" style="width:216px" :disabled="!submenuFlag"></el-input>
					</el-form-item>
					<el-form-item :label="$t('merchantList.no3')" prop="contactPhone">
						<el-input type="age"  v-model="addForm.contactPhone" style="width:216px" :disabled="!submenuFlag"></el-input>
					</el-form-item>
				</div>
				<el-form-item :label="$t('merchantList.no15')">
					<el-upload
						:disabled="!submenuFlag"
            :action="imgAction"
            :show-file-list="false"
						accept="application/pdf"
            :on-success="handleAvatarSuccess">
			
            <el-button>{{$t('merchantList.no16')}}</el-button>
          </el-upload>
				</el-form-item>
				<el-form-item :label="$t('merchantList.no11')">
					<el-date-picker :disabled="!submenuFlag" 
					type="daterange" 
					:placeholder="$t('public.placeholder')" 
					v-model="addForm.cooperationTime" style="width: 100%;"></el-date-picker>
				</el-form-item>
				<el-form-item :label="$t('merchantList.no17')">
					<el-input :disabled="!submenuFlag" type="number" v-model="addForm.unitPrice" style="width:120px"></el-input><span> {{$t('merchantList.no18')}}</span>
				</el-form-item>
				
			</el-form>
		</div>

		<!-- 后台服务配置 -->
		<h3 class="mb10">{{$t('merchantList.no19')}}</h3>
		<div class="mb20">
			<table class="allTable">
				<tr>
					<th width="15%">{{$t('merchantList.no20')}}</th>
					<th width="50%">{{$t('merchantList.no21')}}</th>
					<th width="35%">{{$t('public.operation')}}</th>
				</tr>
				<tr>
					<td >{{$t('merchantList.no57')}}</td>
					<td >{{$t('merchantList.no61')}}</td>
					<td >
						<span :class="partnerId?'table_opr':'mg5'" @click="jumpDetail('auditprocess')">{{$t('merchantList.no22')}}</span>
						<span :class="partnerId?'table_opr':'mg5'" @click="jumpDetail('collectionprocess')">{{$t('merchantList.no23')}}</span>
						<span :class="partnerId?'table_opr':'mg5'" @click="jumpDetail('serviceprocess')">{{$t('merchantList.no24')}}</span>
						<span :class="partnerId?'table_opr':'mg5'" @click="jumpDetail('routingprocess')">{{$t('merchantList.no25')}}</span>
					</td>
				</tr>
				<tr>
					<td >{{$t('merchantList.no58')}}</td>
					<td >{{$t('merchantList.no62')}}</td>
					<td >
						<span :class="partnerId?'table_opr':'mg5'" @click="jumpDetail('notechannellistconfig')">{{$t('merchantList.no26')}}</span>
						<span :class="partnerId?'table_opr':'mg5'" @click="jumpDetail('sentcontentlistconfig')">{{$t('merchantList.no27')}}</span>
					</td>
				</tr>
				<tr>
					<td >{{$t('merchantList.no59')}}</td>
					<td >{{$t('merchantList.no63')}}</td>
					<td >
						<span :class="partnerId?'table_opr':'mg5'" @click="jumpDetail('paychannellistconfig')">{{$t('merchantList.no28')}}</span>
					</td>
				</tr>
				<tr>
					<td >{{$t('merchantList.no60')}}</td>
					<td >{{$t('merchantList.no64')}}</td>
					<td >
						<span :class="partnerId?'table_opr':'mg5'" @click="jumpDetail('authenticationlistconfig')">{{$t('merchantList.no29')}}</span>
					</td>
				</tr>
			</table>
		</div>

		<div class="oneLineHasOne">
			<p >
				<span>{{$t('merchantList.no30')}}:</span>
				<span>{{userName}}</span>
			</p>
		</div> 
		<div class="oneLineHasOne">
			<p >
				<span>{{$t('merchantList.no31')}}:</span>
				<span>{{$t('merchantList.no68')}}</span>
				<!-- <span>初始密码为联系方式后4位+!@$</span> -->
			</p>
		</div> 

	</div>
</template>

<script>
export default {
	name: 'addMerchant',
  data () {
    return {
			addForm: {
				stage: '',
				partnerName: '',
				unitPrice: '',
				contactName: '',
				contactPhone: '',
				cooperationTime: '',
				country: '',
			},
			id: '',
			submenuFlag: true,
			rules: {
				partnerName: [
					{ required: true, message: ' ', trigger: 'blur' },
				],
				stage: [
					{ required: true, message: ' ', trigger: 'change' },
				],
				contactName: [
					{ required: true, message: ' ', trigger: 'blur' },
				],
				country: [
					{ required: true, message: ' ', trigger: 'blur' },
				],
				contactPhone: [
					{ required: true, message: ' ', trigger: 'blur',minlength: '4' },
					{ min: 4, message: this.$t('merchantList.no69'), trigger: 'blur' }
				],
			},
			options1: this.$store.state.options.merchantListStatus_option,
			options2: [],
			options3: this.$store.state.options.country_option,
			tableData: [
				{id:1,},
				{id:2,},
				{id:3,},
				{id:4,},
			],
			fileList: [],
			imageUrl: '',
			imgAction:this.$action.fileUpload,
			partnerId: '',
			userName: '',
			addOrChange: '',
			from: '',
    }
  },
  methods: {
    onSubmit(formName){
			this.$refs[formName].validate((valid) => {
          if (valid) {
						console.log(this.addForm.unitPrice)
            let pattern = /^(([1-9]{1}\d*)|(0{1}))(\.\d{2})$/
						if(this.addForm.agreementUrl&&this.addForm.unitPrice==''){
							return this.$globalMsg.error(this.$t('merchantList.no65'))
						}
						if(this.addForm.unitPrice&&!pattern.test(this.addForm.unitPrice)){
							return this.$globalMsg.error(this.$t('merchantList.no67'))
						}
						
						// console.log(pattern.test(str));
						let httpurl = this.$action.partner_add
						let option = {
							param: {
								partnerName: this.addForm.partnerName,
								contactName: this.addForm.contactName,
								contactPhone: this.addForm.contactPhone,
								stage: this.addForm.stage,
								agreementUrl: this.addForm.agreementUrl,
								unitPrice: this.addForm.unitPrice,
								country : this.addForm.country,
								cooperationTimeStart: this.addForm.cooperationTime?this.$store.getters.yyyy_m_d(this.addForm.cooperationTime[0]):'',
								cooperationTimeEnd: this.addForm.cooperationTime?this.$store.getters.yyyy_m_d(this.addForm.cooperationTime[1]):'',
							}
						}
						if(this.partnerId){
							option.param.id = this.partnerId
							httpurl = this.$action.partner_update
						}
						this.$axios.post(httpurl, option).then(res => {
							if (res.code == 200) {
								this.$globalMsg.success(this.$t('message.success'))
							}else{
								this.$globalMsg.error(res.message)
							}
							
							this.getDetailData()
						})
						this.submenuFlag = false
          } else {
            return false;
          }
        });
			
		},
		addMerchant(){
			this.submenuFlag = true
		},
		handleAvatarSuccess(res, file) {
			this.$globalMsg.success(this.$t('message.success'))
			this.imageUrl = URL.createObjectURL(file.raw);
			this.addForm.agreementUrl = res.data;
    	},
		getDetailData(){
			this.submenuFlag = true
      let option = {
				param: {
          id:this.partnerId,
        },
      }
      this.$axios.post(this.$action.partner, option).then(res => {
        if (res.code == 200) {
          this.addForm.id = res.data.id
          this.addForm.partnerName = res.data.partnerName
          this.addForm.partnerNo = res.data.partnerNo
          this.addForm.contactPhone = res.data.contactPhone
					this.addForm.contactName = res.data.contactName
					this.addForm.stage = res.data.stage
					this.addForm.country = res.data.country
					if(res.data.stage==1||res.data.stage==2||res.data.stage==3){
						this.options2 = this.options1.filter(value=>value.value==1||value.value==2||value.value==3)
					}
					if(res.data.stage==4){
						this.options2 = this.options1.filter(value=>value.value==4)
					}
					if(res.data.stage==5){
						this.options2 = this.options1.filter(value=>value.value==5)
					}
					if(res.data.stage==0){
						this.options2 = this.options1.filter(value=>value.value==0)
					}
					this.addForm.unitPrice = this.$store.getters.gettoFixed(res.data.unitPrice)
					if(res.data.cooperationTimeStart){
						this.addForm.cooperationTime = [res.data.cooperationTimeStart,res.data.cooperationTimeEnd]
					}
					this.getAdminName()
				}
				this.submenuFlag = false
      })
		},
		getMenuDetailData(){
			this.submenuFlag = true
      let option = {
				param: {}
      }
      this.$axios.post(this.$action.partner, option).then(res => {
        if (res.code == 200) {
					this.partnerId = res.data.id
          this.addForm.id = res.data.id
					this.addForm.partnerName = res.data.partnerName
					this.addForm.partnerNo = res.data.partnerNo
          this.addForm.contactPhone = res.data.contactPhone
					this.addForm.contactName = res.data.contactName
					this.addForm.stage = res.data.stage
					this.addForm.country = res.data.country
					if(res.data.stage==1||res.data.stage==2||res.data.stage==3){
						this.options2 = this.options1.filter(value=>value.value==1||value.value==2||value.value==3)
					}
					if(res.data.stage==4){
						this.options2 = this.options1.filter(value=>value.value==4)
					}
					if(res.data.stage==5){
						this.options2 = this.options1.filter(value=>value.value==5)
					}
					if(res.data.stage==0){
						this.options2 = this.options1.filter(value=>value.value==0)
					}
					
					this.addForm.unitPrice = this.$store.getters.gettoFixed(res.data.unitPrice)
					if(res.data.cooperationTimeStart){
						this.addForm.cooperationTime = [res.data.cooperationTimeStart,res.data.cooperationTimeEnd]
					}
					this.getAdminName()
				}
				this.submenuFlag = false
      })
		},
		jumpDetail(path){
			if(this.partnerId){
				this.$router.push({ path,query:{id:this.partnerId,from: this.from} })
			}
		},
		getAdminName(){
      let option = {
				param: this.partnerId
      }
      this.$axios.post(this.$action.partner_admin, option).then(res => {
        if (res.code == 200) {
					this.userName = res.data.userName
				}
      })
		}
  },
  mounted () {
		if(this.$route.query.from=='merchant'){
			this.from ='merchant'
			if(this.$route.query.id){
				this.addOrChange = 'change'
				this.partnerId = this.$route.query.id
				this.getDetailData()
			}else{
				this.submenuFlag = false
				this.addOrChange = 'add'
				this.options2 = this.options1.filter(value=>value.value==1||value.value==2||value.value==3)
				this.options2.unshift({value: '', label: 'public.placeholder'})
			}
		}else{
			this.from ='onemerchant'
			this.getMenuDetailData()
		}
		
		
  }
}
</script>

<style scoped lang="scss">
.mg5{
	margin: 0 5px;
}
</style>